<template>
	<view :style="skin" class="content priceList" >
		<view class="title">
			{{$t('lease.priceList')}}
			<text class="iconfont icon-a-mingchengarrow_left iconLeft" @click="goBack"></text>
		</view>
		<view class="tableTitle flex-c-SB">
			<view class="typeBox">
				{{$t('lease.productModel')}}
			</view>
			<view class="dateNum">
				{{$t('lease.day')}}
			</view>
			<view class="price">
				{{$t('lease.price')}}
			</view>
		</view>
		
		<view class="priceBox flex-c-SB">
			<view class="typeBox">
				{{deviceType}}
			</view>
			<view class="dateNum">
				<view class="" v-for="(date,dateIndex) in dayList" :key="dateIndex">
					{{date}}
				</view>
			</view>
			<view class="price">
				<view class="" v-for="(itemPrice,priceIndex) in price" :key="priceIndex">
					
					{{ moneyTran(itemPrice) }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
		import { getPriceTypeToId } from '@/utils/sql/sqlPrice.js'
	export default {
		props:['productModel'],
		data() {
			return {
				deviceType:'',
				dayList:[],
				price:[]
			};
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})
		
		},
		mounted() {
			console.log(this.productModel);
			getPriceTypeToId(this.productModel).then(res=>{
				console.log(res);
				if(res.code == 0){
					let priceModel = JSON.parse(res.data[0].priceModel)
					this.deviceType = res.data[0].productModel
					this.dayList = Object.keys(priceModel)
					this.price = Object.values(priceModel)
				}
			})
		},
		methods:{
			moneyTran(m) {
				return (m / 100).toFixed(2)
			},
			goBack(){
				this.$emit('goBack')
			}
		}
	}
</script>

<style lang="scss" scoped>
.priceList{
	.title{
		height: 48px;
		background-color: #0F40F5;
		border-radius: 8px;
		position: relative;
		color: #fff;
		text-align: center;
		line-height: 48px;
		
		
		.iconLeft{
			position: absolute;
			top: 50%;
			left: 16px;
			transform: translate(-50%,-50%);
		}
	}
	.tableTitle{
		margin-top: 8px;
	}
	.tableTitle{
		font-weight: 600;
		text-align: center;
	}
	.priceBox{
		border-bottom: 1px solid #ccc;
		
	}
	.typeBox{
		width: 150px;
		text-align: center;
	}
	.dateNum{
		width: 75px;
		text-align: center;
	}
	.price{
		width: 75px;
		text-align: center;
	}
}
</style>
